<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getCodeAPI } from '../../../apis/apis';
import { useUserStore } from '../../../stores/userStore';
import { useRouter } from 'vue-router';

// 用户名
const password = ref('')
// 密码
const username = ref('')
// 验证码
const code = ref('')
// 图片验证码
const base64 = ref('')
// 登录成功跳转到管理端
const router = useRouter()
// 封装了登录方法和token
const userStore = useUserStore()

// 获取验证码
const getBase64 = async () => {
  const res = await getCodeAPI()
  base64.value = res.data
}
// 登录
const submit = async () => {
  const data = {
    username: username.value,
    password: password.value,
    code: code.value
  }
  userStore.login(data)

  if (userStore.token) {
    router.push({
    path: '/admin'
  })
  }
 
}

onMounted(() => {
  getBase64()
})
</script>

<template>

  <div class="relative flex flex-col w-1/3 my-5 space-y-5 px-5  py-8 bg-white rounded-lg shadow-lg">
    <div class="flex items-center w-3/5 ">
      <div class="w-12">账号:</div>
      <el-input
        v-model="username"
        maxlength="12"
        placeholder="输入账号"
      />
    </div>
    <div class="flex items-center w-3/5">
      <div class="w-12">密码:</div>
      <el-input
        v-model="password"
        type="password"
        placeholder="输入密码"
        show-password
      />
    </div>
    <div class="flex items-center space-x-3">
      <div class="">验证码:</div>
      <div class="w-20">
        <el-input
          v-model="code"
          style="font-size: medium;"
          maxlength="4"
          placeholder="验证码"
        />
      </div>
      <img
        class="w-22 h-11"
        :src="base64"
      >
    </div>
    <div class="mx-auto pt-3">
      <el-button
        @click="submit"
        class="tracking-widest w-32"
        type="primary"
      >登录</el-button>
    </div>
    <div class="absolute top-5 right-12 hidden lg:block">
      <div class="flex items-center flex-col space-y-5">
        <svg
          class="w-24 h-24"
          viewBox="0 0 1024 1024"
        >
          <path
            d="M377.596784 791.989528s-39.199482 22.799699 27.799633 30.399598c81.198926 9.199878 122.598379 7.999894 211.997197-8.999881 0 0 23.599688 14.799804 56.399254 27.599635C473.395518 926.787745 220.198866 835.988946 377.596784 791.989528m-24.399677-112.198517s-43.799421 32.399572 23.199693 39.399479c86.598855 8.999881 155.197948 9.599873 273.596382-13.199825 0 0 16.399783 16.599781 42.199442 25.599661-242.596792 70.999061-512.593222 5.799923-338.995517-51.799315m206.397271-190.197485c49.399347 56.799249-12.999828 107.998572-12.999828 107.998572s125.398342-64.799143 67.799103-145.798072c-53.799289-75.599-94.998744-113.198503 128.198305-242.596792 0.199997 0-350.395367 87.598842-182.99758 280.396292m265.196493 385.194907s28.999617 23.799685-31.799579 42.399439c-115.798469 34.999537-481.593632 45.599397-583.192289 1.399982-36.599516-15.799791 31.999577-37.999498 53.599291-42.599437 22.399704-4.799937 35.399532-3.999947 35.399532-3.999947-40.599463-28.599622-262.596528 56.199257-112.798508 80.398937 408.3946 66.399122 744.790152-29.799606 638.791553-77.598974M396.396536 563.592548s-186.197538 44.199416-65.999128 60.199204c50.799328 6.79991 151.99799 5.199931 246.196745-2.599966 76.998982-6.399915 154.397958-20.39973 154.397958-20.39973s-27.19964 11.599847-46.799381 24.999669c-188.997501 49.799342-553.992675 26.599648-448.994063-24.19968 88.998823-42.799434 161.197869-37.999498 161.197869-37.999497m333.995583 186.597532c192.197459-99.79868 103.198635-195.797411 41.199456-182.797582-15.199799 3.199958-21.999709 5.999921-21.999709 5.99992s5.599926-8.799884 16.399783-12.599833c122.598379-43.199429 216.997131 127.198318-39.599477 194.597427 0-0.199997 2.99996-2.799963 3.999947-5.199932M614.393653 0s106.398593 106.398593-100.998664 269.99643c-166.197802 131.198265-37.999498 206.197274 0 291.596144-96.998717-87.598842-168.197776-164.597824-120.398408-236.396874C463.195652 220.197088 657.393085 168.997765 614.393653 0m-198.997369 1020.786502c184.397562 11.799844 467.593817-6.599913 474.19373-93.798759 0 0-12.799831 32.999564-152.397985 59.399214-157.397919 29.599609-351.595351 26.199654-466.59383 7.199905 0-0.199997 23.599688 19.399743 144.798085 27.19964"
            class="fill-slate-800"
            p-id="2719"
          ></path>
        </svg>
        <svg
          class="w-24 h-24"
          viewBox="0 0 1024 1024"
        >
          <path
            d="M512 504L764.8 68.8h-134.4L512 275.2 393.6 70.4h-134.4L512 504zM819.2 70.4L512 600 204.8 68.8H0l512 886.4L1024 70.4H819.2z"
            class="fill-slate-700"
            p-id="3689"
          ></path>
        </svg>
      </div>
    </div>

  </div>

</template>

<style
  scoped
  lang='scss'
></style>